<template>
  <!-- 树形控件 -->
  <div style="height: 100%;overflow-y: auto">
    <Row>
      <i-input icon="ios-search"  style="width:100% !important;" v-model="title" :placeholder="placeholder"></i-input>
    </Row>
    <Row>
         <Select 
          v-model="selectVal" 
          filterable 
              placeholder="请输入关键词搜索"
          @on-change='selChange'
          style="width:100%;margin-bottom: 10px;margin-top:10px">
            <Option v-for="item in urlList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
    </Row>
    <Tree
      v-if="baseDataList.length>=0"
      :data="baseDataList"
      :show-checkbox="showCheckbox"
      :check-strictly="true"
      @on-select-change="selectChange"
      @on-check-change="checkChange"
      :render="renderContent"
    ></Tree>
    <Spin size="large" v-if='spinShow'></Spin>
    <img
      v-if="baseDataList.length==0"
      src="~@/assets/img/efficiencyAnalysis/zwsj.png"
      width="80%"
      style="position: relative;left: 10%;"
    />
  </div>
</template>

<script>
import { organizationTree4F } from "@/api/efficiency.js";
import {realtimemonitorSeltreeXHR,realtimemonitorXHR,realtimemonitorSeltreeXHR2} from "@/api/hiz";
import util from "@/libs/util.js";
import { SSL_OP_NO_SESSION_RESUMPTION_ON_RENEGOTIATION } from "constants";
export default {
  props: {
    showCheckbox: {
      type: Boolean,
      default: false
    },
    checkNode: {
      type: Function,
      default: null
    },
    checkNodes: {
      type: Function,
      default: null
    },
    placeholder: {
      type: String,
      default: ""
    },
    hiddenItem: {
      type: String,
      default: null
    },
    renderContent:{
      type:Function,
      default: null
    },
    // clearIndex:{
    //   type:Function,
    //   default: null
    // }
  },
  data() {
    return {
      spinShow:false,
      modal1:false,
      baseDataList: [],
      title: "",
      checkList: [],
      selectVal:'organizationTree4F',
      ids:{
        selDeptUnitTree:"C_ENERGY_DEPT",
        selEnergySystemTree:"C_ENERGY_SYSTEM",
        selEnergyProdLineTree:"C_ENERGY_LINE",
        selEnergyAreaTree:'C_ENERGY_AREA',
        organizationTree4F:null
      },
      urlList:[
        {
          label:'默认',
          value:'organizationTree4F'
        },
        {
          label:'部门',
          value:'selDeptUnitTree'
        },
        {
          label:'系统',
          value:'selEnergySystemTree'
        },
        {
          label:'产线',
          value:'selEnergyProdLineTree'
        },
        {
          label:'区域',
          value:'selEnergyAreaTree'
        }
      ],
    };
  },
  computed: {},
  watch: {
    title(val) {
      this.baseDataList=[]
      this.spinShow=true
      if(this.selectVal=='organizationTree4F'){
        organizationTree4F({
          custId: this.token.custId,
          cliqueId: this.token.cliqueId,
          nodeName: val
        }).then(res => {
          this.spinShow=false
          if (res.code == 200) {
            let baseData = JSON.parse(
              JSON.stringify(res.result).replace(/nodeName/g, "title")
            );
            baseData = this.filterNode(baseData, 0);
            this.baseDataList = baseData;
          }
        });
      }else{
         realtimemonitorSeltreeXHR2(
          {type:this.ids[this.selectVal],nodeName:val}
        ).then(res => {
          this.spinShow=false
          let baseData = JSON.parse(
            JSON.stringify(res.result).replace(/text/g, "title").replace(/id/g, "code")
          );
          baseData=baseData.children
          baseData = this.filterNode1(baseData);
          this.baseDataList = baseData;
        });
      }
      
    }
  },
  methods: {
    selectChange(nodes, node) {
      
      if (this.showCheckbox) {
        if (!node.disableCheckbox) {
          if (node.checked) {
            node.checked = false;
            this.checkList = this.checkList.filter(item => {
              return item.title != node.title;
            });
            this.checkChange(this.checkList, node);
            return;
          }

          if (this.sizeLimit) {
            if (this.checkList.length > 3) {
              this.$Message.info("最多只能选择四个节点");
              return;
            }
          }
          if (nodes.length == 0 && !node.checked) {
            node.checked = true;
            this.checkList.push(node);
            this.checkChange(this.checkList, node);
          } else {
            node.checked = true;
            this.checkList.push(node);
            this.checkChange(this.checkList, node);
          }
        }
      } else {
       
        this.checkNode(nodes, node,this.ids[this.selectVal]);
      }
    },
    checkChange(nodes, node) {
   
      if (nodes.length > 4) {
        this.$Message.info("最多只能选择四个节点");
        nodes = nodes.filter(item => {
          if (item.title == node.title) {
            node.checked = false;
          }
          return item.title != node.title;
        });
      } else {
        this.checkNodes(nodes, node,this.ids[this.selectVal])
        
      }
      this.checkList = nodes;
      console.log(1111111111111)
    },
    
    filterNode(list, custId) {
      list.map(res => {
        if (res.children != null&&res.children.length>0) {
          res.disableCheckbox = true;
        }
        if(res.resourceMark&&res.resourceMark=="01"){
          res.disableCheckbox = true;
        }
        // res.expand = true;
        if (this.hiddenItem != null) {
          if (res[this.hiddenItem] != null && res[this.hiddenItem] != "null") {
            delete res[this.hiddenItem];
          }
        }
        // if (
        //   "energyUnitId" in res &&
        //   res.energyUnitId != null &&
        //   res.energyUnitId != "null"
        // ) {
        //   res.disableCheckbox = false;
        // } else {
        //   res.disableCheckbox = true;
        // }
        if ("custId" in res && res.custId != null && res.custId != "null") {
        } else {
          res.custId = custId;
        }
        if (
          "children" in res &&
          res.children != null &&
          res.children.length > 0
        ) {
          this.filterNode(res.children, res.custId);
        }
      });
      return list;
    },
    filterNode1(list, custId) {
      list.map(res => {
        if (res.children != null&&res.children.length>0) {
          res.disableCheckbox = true;
        }
        if(res.resourceMark&&res.resourceMark=="01"){
          res.disableCheckbox = true;
        }
        res.expand = true;
        res.iconStyleName = res.attributes.factoryUnitTreeVO.iconStyleName || ""
        if (this.hiddenItem != null) {
          if (res[this.hiddenItem] != null && res[this.hiddenItem] != "null") {
            delete res[this.hiddenItem];
          }
        }
       
        if ("custId" in res && res.custId != null && res.custId != "null") {
        } else {
          res.custId = custId;
        }
        if (
          "children" in res &&
          res.children != null &&
          res.children.length > 0
        ) {
          this.filterNode1(res.children, res.custId);
        }
      });
      return list;
    },
    selChange(){
      this.searchTree();
      this.$emit("clearIndex")
    },
    searchTree(){
      this.baseDataList=[]
      this.spinShow=true
      if(this.selectVal=='organizationTree4F'){
        let token = util.token.initToken();
        this.token = token;
        organizationTree4F({ custId: token.custId, cliqueId: token.cliqueId }).then(
          res => {
            this.spinShow=false
            if (res.code == 200) {
              let baseData = JSON.parse(
                JSON.stringify(res.result).replace(/nodeName/g, "title")
              );
              baseData = this.filterNode(baseData, 0);
              this.baseDataList = baseData;
            }
          }
        );
      }else{
          
        realtimemonitorSeltreeXHR2(
          {type:this.ids[this.selectVal]}
        ).then(res => {
          this.spinShow=false
          let baseData = JSON.parse(
            JSON.stringify(res.result).replace(/text/g, "title").replace(/id/g, "code")
          );
          baseData=baseData.children
          baseData = this.filterNode1(baseData);
          this.baseDataList = baseData;
        });
      }
    }
  },
  created() {
    let token = util.token.initToken();
        this.token = token;
        this.spinShow=true
    organizationTree4F({ custId: token.custId, cliqueId: token.cliqueId }).then(
      res => {
        this.spinShow=false
        if (res.code == 200) {
          let baseData = JSON.parse(
            JSON.stringify(res.result).replace(/nodeName/g, "title")
          );
          baseData = this.filterNode(baseData, 0);
          this.baseDataList = baseData;
        }
      }
    );
  },
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.ivu-spin-dot{
    margin: auto
  }
/deep/.ivu-tree-title-selected {
  background-color: #c1dfff;
}
/deep/.powersupplyTree{
  padding:0!important;
}
</style>